<template>
	<div id="">
		<span id="1" style="display: none;">
			{{current.userId}}
		</span>
		<div style="background:#eee;padding: 20px">
		<Card v-for="(item,index) in paymentItems" style="margin-bottom: 10px">
		    <p>期数:第{{item.number}}期</p>
		    <span>应收:{{item.receivables}}元</span>&nbsp;<span>服务费:{{item.service}}元</span>
			<p>应付:{{item.payable}}</p>
			<p>还款状态:{{item.status}}</p>
			<p>计划还款日:{{item.planPayDate}}</p>
			<p>还款日:{{item.payDate}}</p>
		    <Button type="primary" @click="pay(item)" :disabled="item.status !='待还款'">支付</Button>
		</Card>
		</div>
		
		<tabbar></tabbar>
		<div style="height: 3rem;"></div>
	</div>
	
</template>

<script>
	import tabbar from '../../src/components/tarbar.vue'
	import store from '../../common/store.js'
	import { Toast } from 'vant';
	export default {
	  data() {
	    return {
	         userId:'',
			 paymentItems:{},
			 openId:'',
	    };
	  },
	  components: {
	    tabbar,
	  },
	  methods: {
		  pay:function(item){		
			  var number = item.id; //第几期
			  var totalFee = item.payable; //应付金额
			  //this.openId--------------->openId
			  //统一下单需要的数据 分期第几期(number),钱数(pay),
			  this.http
			   .post({
			  	 url: '/wxPayH5?openid=' + this.openId + "&attachPaymentId=" + number + "&totalFee=" + totalFee
			   })
			   .then((data) => {
			  	 //获取data中的签名的信息,拉起支付
			  	 WeixinJSBridge.invoke(
			  		 'getBrandWCPayRequest', {
			  			 "appId": data.appId, //公众号ID，由商户传入     
			  			 "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数     
			  			 "nonceStr": data.nonceStr, //随机串     
			  			 "package": data.package,
			  			 "signType": data.signType, //微信签名方式：     
			  			 "paySign": data.paySign //微信签名 
			  		 },
			  		 function(res) {
			  			 if (res.err_msg == "get_brand_wcpay_request:ok") {
			  				 // 使用以上方式判断前端返回,微信团队郑重提示：
			  				 //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。		
			  			 }
			  		 });
			  		 //刷新页面,重新加载数据
			  		  this.search()
			   });
			  
		  },
		  search:function(){
			  this.http.get({
				  url:`/system/student/payment/${this.$data.userId}`
			  }).then((data) => {
				  
				  this.$data.paymentItems = data.paymentItems
			  })
			  
		  }
	  },
	  mounted() {
	  	this.$data.userId = this.$data.currentUser.user.userId
		this.$data.openId = this.$store.state.openId
	  		this.search()
	  	// window.addEventListener("click", this.search);
	  },
	  computed: {
	  	current: function() {
	  		this.$data.currentUser = store.state.currentUser
	  		return store.state.currentUser
	  	},
	  },
	};
	
</script>

<style>
</style>
